<!-- <template>
	<div class="materialPrecisionTemplate-page">
		<div class="search-field">
			<el-form :model="searchForm" inline>
				<el-form-item label="template_code" prop="templateCode">
			<el-input
				placeholder="请输入template_code"
				v-model="searchForm.templateCode"
				autocomplete="off"
			/>
		</el-form-item>
				<el-form-item label="applicable_materials" prop="applicableMaterials">
			<el-input
				placeholder="请输入applicable_materials"
				v-model="searchForm.applicableMaterials"
				autocomplete="off"
			/>
		</el-form-item>
				<el-form-item label="template_name" prop="templateName">
			<el-input
				placeholder="请输入template_name"
				v-model="searchForm.templateName"
				autocomplete="off"
			/>
		</el-form-item>
				<el-form-item label="status" prop="status">
			<el-input
				placeholder="请输入status"
				v-model="searchForm.status"
				autocomplete="off"
			/>
		</el-form-item>
				<el-form-item label="created_by" prop="createdBy">
			<el-input
				placeholder="请输入created_by"
				v-model="searchForm.createdBy"
				autocomplete="off"
			/>
		</el-form-item>
									<el-form-item>
					<div>
						<el-button type="primary" @click="startSearch"> 查询 </el-button>
						<el-button @click="startClear"> 重置 </el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="user-page-content">
			<div class="btns-fun-field">
				<el-button
						type="primary"
						@click.prevent="showAddEditDialog"
						:icon="Plus"
				>
					新增 中文_FmsMaterialPrecisionTemplate
				</el-button>
			</div>
			<div class="table-field">
<el-table
	:data="tableData"
	border
	stripe
	style="width: 100%"
	v-loading="tableLoading"
>

			<el-table-column prop="id" label="id" width="190" />
				<el-table-column prop="templateCode" label="template_code" width="190" />
				<el-table-column prop="applicableMaterials" label="applicable_materials" width="190" />
				<el-table-column prop="templateName" label="template_name" width="190" />
				<el-table-column prop="status" label="status" width="190" />
				<el-table-column prop="createdBy" label="created_by" width="190" />
						<el-table-column label="操作" min-width="220px" fixed="right">
		<template #default="scope">
			<el-button
					type="success"
					size="small"
					@click.prevent="showAddEditDialog(scope.row, 2)"
			>编辑</el-button
			>
			<el-button
					type="danger"
					size="small"
					@click.prevent="showRemoveDialog(scope.row)"
			>删除</el-button
			>
		</template>
	</el-table-column>
</el-table>
			</div>
			<div class="pagination-field">
				<el-pagination
						v-model:current-page="formData.pageIndex"
						v-model:page-size="formData.pageSize"
						:page-sizes="[10, 20, 30, 40]"
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="formData.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<materialPrecisionTemplateAddUpdate v-model="addUpdateRef"></materialPrecisionTemplateAddUpdate>
		<materialPrecisionTemplateRemove v-model="removeRef"></materialPrecisionTemplateRemove>
	</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getmaterialPrecisionTemplatePagination,
  getAllmaterialPrecisionTemplateList,
} from "@/api/userManage.api";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// import { useUserPermission } from "@/utils/permission.utils";
import materialPrecisionTemplateRemove from "./materialPrecisionTemplateRemove.vue";
import materialPrecisionTemplateAddUpdate from "./materialPrecisionTemplateAddUpdate.vue";

// const userPermission = useUserPermission();

/****
 * =============== 新增、修改相关操作 =====================
 */
const addUpdateRef = reactive({
  visible: false,
  disabled: false,
  title: `中文_fmsMaterialPrecisionTemplate`,
  curSelectRow: {},
  roleList: [],
  form: {},
  rules: {},
  refreshDataList: () => {
    getDataList();
  },
});

const showAddEditDialog = (item: any, type: number) => {
  //新增 中文_fmsMaterialPrecisionTemplate
  if (item.target) {
    let form = {
      id: null,
      templateCode: "",
      applicableMaterials: "",
      templateName: "",
      status: "",
      disabled: false,
    };
    addUpdateRef.visible = true;
    addUpdateRef.disabled = false;
    addUpdateRef.form = form;
    return;
  }

  let form = {
    id: item.id,
    templateCode: item.templateCode,
    applicableMaterials: item.applicableMaterials,
    templateName: item.templateName,
    status: item.status,
    disabled: false,
  };
  addUpdateRef.visible = true;
  addUpdateRef.disabled = true;
  addUpdateRef.form = form;
};

/****
 * =============== 删除操作 =====================
 */
const removeRef = reactive({
  visible: false,
  title: "中文_FmsMaterialPrecisionTemplate",
  curSelectRow: {},
  refreshDataList: () => {
    getDataList();
  },
});
const showRemoveDialog = (item: any) => {
  removeRef.visible = true;
  removeRef.curSelectRow = item;
};

/****
 * =============== 搜索、表格、分页 =====================
 */
const formData = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});

const searchForm = ref({
  templateCode: "",
  applicableMaterials: "",
  templateName: "",
  status: "",
});

const tableLoading = ref(false);
const tableData = ref([]);
/***
 * 开始搜索
 */
const startSearch = () => {
  formData.pageIndex = 1;
  getDataList();
};

/***
 * 重置搜索条件
 */
const startClear = () => {
  formData.pageIndex = 1;
  let value = searchForm.value;
  Object.keys(value).forEach((key) => {
    (value as any)[key] = "";
  });
  getDataList();
};

const handleSizeChange = (value: number) => {
  formData.pageSize = value;
  getDataList();
};

const handleCurrentChange = (value: number) => {
  formData.pageIndex = value;
  getDataList();
};

const getDataList = () => {
  let searchCondition: any = {};

  let templateCode = searchForm.value.templateCode;
  if (templateCode) {
    searchCondition.templateCode = templateCode;
  }
  let applicableMaterials = searchForm.value.applicableMaterials;
  if (applicableMaterials) {
    searchCondition.applicableMaterials = applicableMaterials;
  }
  let templateName = searchForm.value.templateName;
  if (templateName) {
    searchCondition.templateName = templateName;
  }
  let status = searchForm.value.status;
  if (status) {
    searchCondition.status = status;
  }

  tableLoading.value = true;
  getUserPagination({
    pageSize: formData.pageSize,
    pageIndex: formData.pageIndex,
    ...searchCondition,
  })
    .then(function (res: any) {
      tableLoading.value = false;
      console.log(res);
      tableData.value = res.list || [];
      formData.total = Number(res.total);
    })
    .catch((error) => {
      console.log(error);
      tableLoading.value = false;
    });
};

onMounted(() => {
  getDataList();
});
</script>
<style lang="scss" scoped>
.materialPrecisionTemplate-page {
  height: 100%;
}

.btns-fun-field {
  margin-bottom: 20px;
}

.pagination-field {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

.btn-inner {
  display: flex;
  justify-content: center;
  color: #fff;
}

.tag-field {
  .el-tag {
    margin-right: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
}

.search-field {
  margin-bottom: 12px;
  background: #fff;
  padding: 20px 20px 0px 20px;
  border-radius: 8px;
}

.materialPrecisionTemplate-page-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}
</style> -->
<template>
  <div class="page"></div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>
